<template>
  <div>
    <h1>【aty-checkbox】 component demo</h1>
    <p>【aty-checkbox】 本质是复选框 input:checkbox</p>
    <aty-row class="fd-checkbox-box">
      <aty-row>
        <aty-title level="4">1.【aty-checkbox】基础单独使用</aty-title>
        <aty-panel>单独使用，必须使用 v-model 进行双向绑定数据。</aty-panel>
        <aty-row class="fd-p5">
          <aty-col span="8"> <aty-checkbox v-model="checked" checkboxLabel="默认未选中" /></aty-col>
          <aty-col span="8" :class="{active:checked}"> checked:{{checked}}</aty-col>
        </aty-row>
        <aty-row class="fd-p5">
          <aty-col span="8"> <aty-checkbox v-model="checked2" checkboxLabel="默认选中" /></aty-col>
          <aty-col span="8" :class="{active:checked2}"> checked:{{checked2}}</aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">2.【aty-checkbox】单独使用禁用</aty-title>
        <aty-row class="fd-p5">
          <aty-col span="8"> <aty-checkbox v-model="checked3" disabled checkboxLabel="默认选中禁用" /></aty-col>
          <aty-col span="8" :class="{active:checked3}"> checked:{{checked3}}</aty-col>
        </aty-row>
        <aty-row class="fd-p5">
          <aty-col span="8"> <aty-checkbox v-model="checked4" disabled checkboxLabel="默认未选中禁用" /></aty-col>
          <aty-col span="8" :class="{active:checked4}"> checked:{{checked4}}</aty-col>
        </aty-row>
      </aty-row>

      <aty-row>
        <aty-title level="4">3.【aty-checkbox】单独使用事件绑定</aty-title>
        <aty-checkbox @change="changeSingle" checkboxLabel="事件绑定 @change" />
      </aty-row>

      <aty-row>
        <aty-title level="4">4.【aty-checkbox】  大小</aty-title>
        <aty-checkbox size="small" checkboxLabel="宝马" />
        <aty-checkbox size="default" checkboxLabel="奔驰" checked />
        <aty-checkbox size="large" checkboxLabel="大众" disabled />
      </aty-row>

      <aty-row>
        <aty-title level="4">5.【aty-checkbox】  art-checkbox-group</aty-title>
        <aty-checkbox-group name="fruit" :dataList="dataList" v-model="fruit" />
        <span>当前选中的是： <span v-for="item in fruit" v-text="item+'；'"></span></span>
      </aty-row>

      <aty-row>
        <aty-title level="4">6.【aty-checkbox】  配合 art-checkbox-group 自定义 aty-checkbox</aty-title>
        <aty-panel>请注意， aty-checkbox-group上需要和其下的 aty-checkbox name 和value指针必须一致</aty-panel>
        <aty-checkbox-group name="fruit2" :dataList="dataList" v-model="fruit2">
          <aty-checkbox value="21" v-model="fruit2" v checkboxLabel="宝马" />
          <aty-checkbox value="22" v-model="fruit2" checkboxLabel="奔驰" />
          <aty-checkbox value="23" v-model="fruit2" checkboxLabel="大众" />
          <aty-checkbox value="24" v-model="fruit2" checkboxLabel="大地飞鹰" />
        </aty-checkbox-group>
        <span>当前选中的是： <span v-for="item in fruit2" v-html="item+'；'"></span></span>
      </aty-row>

      <aty-row>
        <aty-title level="4">7.【aty-checkbox】全选/不全选/实例</aty-title>
        <aty-panel>请注意， aty-checkbox-group上需要和其下的 aty-checkbox name 和value指针必须一致</aty-panel>
        <aty-checkbox v-model="all" :indeterminate="indeterminate" checkboxLabel="全选" @change="changeSelectAll" />
        <aty-checkbox v-model="all" :indeterminate="indeterminate" checkboxLabel="全选" disabled @change="changeSelectAll" />
        <aty-checkbox-group name="fruit3" :dataList="dataList" v-model="fruit3" @change="changeItem" />
        <span>当前选中的是： <span v-for="item in fruit3" v-html="item+'；'"></span></span> <br />
        <span>当前选中的是： <span v-for="item in fruit3String" v-html="item.name+'；'"></span></span>
      </aty-row>

      <aty-row>
        <aty-title level="4">8.【aty-checkbox】使用codeType</aty-title>
        <aty-panel>请注意，需要请求后台数据，需要配合Artery.codeUrl使用</aty-panel>
        <aty-checkbox-group codeType="-600"/>
      </aty-row>
    </aty-row>
  </div>
</template>
<script>
export default {
  data: function () {
    return {
      checked: false,
      checked2: true,
      checked3: true,
      checked4: false,
      checked5: false,
      all: false,
      indeterminate: true,

      fruit: ['2', '3'],
      fruit2: ['2'],
      fruit3: ['3'],
      fruit3String: [],
      dataList: [
        {
          code: '1',
          codeType: 'fruit',
          name: '<em>苹果</em>'
        },
        {
          code: '2',
          codeType: 'fruit',
          name: '香蕉'
        }, {
          code: '3',
          codeType: 'fruit',
          name: '梨'
        }, {
          code: '4',
          disabled: true,
          codeType: 'fruit',
          name: '橘子'
        }
      ]
    }
  },
  methods: {
    // 全选
    changeSelectAll: function (value, name) {
      if (this.all) {
        this.fruit3 = []
        this.dataList.forEach((item, index) => {
          this.fruit3.push(item.code)
        })
      } else {
        this.fruit3 = []
      }
      this.indeterminate = false
    },
    // 单选条目
    changeItem: function (value, currentDataItem, name) {
      if (value.length < this.dataList.length) {
        this.all = false
        if (value.length > 0) {
          this.indeterminate = true
        } else {
          this.indeterminate = false
        }
      } else {
        this.all = true
        this.indeterminate = false
      }
      this.fruit3String = Object.values(currentDataItem)
    },
    changeSingle (value) {
      console.log(value)
    }
  }
}
</script>
<style  lang="less" type="text/less"  scoped>
    .fd-checkbox-box {
        margin: 20px;
        text-align: left;
    }
    .fd-checkbox-box>.aty-row {
        padding-bottom: 15px;
    }
    .fd-p5 {
        padding: 10px 0;
        .aty-col {
            border: 1px solid transparent;
        }
        .active {
            border: 1px solid #3399ff;
        }
    }

</style>
